import 'moment/locale/zh-cn';
import React from 'react';
import { Modal, Button, Space, InputNumber, message } from 'antd';

import TRNotification from '#/utils/notification.js';
import planIcon from '@/assets/img/plan_icon.png';
import { HttpCode } from '#/utils/contacts.js';
import { useTRState } from '#/utils/trHooks.jsx';
import { provincialSpotBiddingPlanPriceLimitConfig } from '../../../service';

import styles from './index.less';

const ConfirmModalComponent = (props) => {
  const { onPress, lowerLimitPrice, upperLimitPrice } = props;
  const [state, setState] = useTRState({
    visible: true,
    loading: false,
    upperLimit: upperLimitPrice,
    lowerLimit: lowerLimitPrice,
  });
  const { loading, visible, upperLimit, lowerLimit } = state;

  const _onCancel = () => {
    setState({ visible: false });
    onPress({ index: 0 });
  };

  const _onSubmit = async () => {
    const params = {
      lowerLimitPrice: lowerLimit,
      upperLimitPrice: upperLimit,
    };
    const res = await provincialSpotBiddingPlanPriceLimitConfig(params);
    if (res && res.statusCode === HttpCode.SUCCESS) {
      message.success(res.message || '保存成功');
    } else {
      message.error(res.message || '保存失败');
    }
    setState({ visible: false });
    onPress({ index: 1 });
  };

  const footerRender = () => [
    <Button key="dtest1" onClick={_onCancel} loading={loading}>
      取消
    </Button>,
    <Button
      key="dtest2"
      type="primary"
      onClick={_onSubmit}
      loading={loading}
      style={{ marginLeft: 16 }}
    >
      确定
    </Button>,
  ];

  return (
    <Modal
      className={styles.modal}
      centered
      width={250}
      maskClosable={false}
      visible={visible}
      title={
        <div className={styles.titleDiv}>
          <div className={styles.left}>
            <img src={planIcon} className={styles.titleLogo} />
            <span className={styles.title}>上下限配置</span>
          </div>
        </div>
      }
      onCancel={_onCancel}
      footer={footerRender()}
    >
      <div className={styles.container}>
        <Space direction="vertical" size={'middle'} style={{ display: 'flex' }}>
          <div className={styles.limit}>
            上限：
            <InputNumber
              size="small"
              value={upperLimit}
              onChange={(e) => setState({ upperLimit: e })}
            />
          </div>
          <div className={styles.limit}>
            下限：
            <InputNumber
              size="small"
              value={lowerLimit}
              onChange={(e) => setState({ lowerLimit: e })}
            />
          </div>
        </Space>
      </div>
    </Modal>
  );
};

class PriceLimitConfigModal {
  __key__ = '';

  show = (props) => {
    return new Promise((resolve) => {
      if (this.__key__ !== '') return;
      this.__key__ = String(Date.now());
      TRNotification.add({
        key: this.__key__,
        content: (
          <ConfirmModalComponent
            {...props}
            onPress={(result) => {
              TRNotification.remove(this.__key__);
              this.__key__ = '';
              resolve(result);
            }}
          />
        ),
        duration: null,
        dismiss: this.dismiss,
      });
    });
  };

  dismiss = () => {
    if (this.__key__.length > 0) {
      TRNotification.remove(this.__key__);
      this.__key__ = '';
    }
  };
}

export default new PriceLimitConfigModal();
